<template>
  <div class="container">
    <Category title="姓名">
      <url slot="center">
        <li v-for="(item, index) in names" :key="index">{{ item }}</li>
      </url>
      <!-- v-slot只能放到template中 -->
      <template v-slot:bottom class="bottom_a">
        <a href="https://www.bilibili.com">bilibili</a>
        <a href="https://www.bilibili.com">bilibili</a>
        <a href="https://www.bilibili.com">bilibili</a>
        <h2>TNT</h2>
      </template>
    </Category>
    <category title="游戏">
      <video
        slot="center"
        controls="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
      ></video>
      <div slot="bottom" class="bottom_a">
        <a href="https://www.bilibili.com">bilibili</a>
        <a href="https://www.bilibili.com">bilibili</a>
        <a href="https://www.bilibili.com">bilibili</a>
      </div>
    </category>
    <category title="电影">
      <img
        slot="center"
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fvsd-picture.cdn.bcebos.com%2Fa787b34846892f17d40f8a227c90308f8af46310.jpg&refer=http%3A%2F%2Fvsd-picture.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653045646&t=99fc97365ed1393cf2af4fb3ddb548e9"
      />
      <div slot="bottom" class="bottom_a">
        <a href="https://www.bilibili.com">bilibili</a>
        <a href="https://www.bilibili.com">bilibili</a>
        <a href="https://www.bilibili.com">bilibili</a>
      </div>
    </category>
  </div>
</template>

<script>
import Category from "./components/Category.vue";
export default {
  name: "App",
  components: { Category },
  data() {
    return {
      names: ["MA", "DING", "SONG", "ZHANG", "LIU", "HE", "YAN"],
      games: ["HE", "YING", "PAO", "MAO", "SHEN"],
      films: ["QINGSHE", "BAISHE", "QUEENSORT"],
    };
  },
};
</script>

<style scoped>
.container,
.bottom_a {
  display: flex;
  justify-content: space-around;
}
video {
  width: 100%;
}
</style>
